<script setup>
import { onMounted, reactive, ref, toRefs } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import axios from "axios";

onMounted(() => {
  getInfo();
});

let imageUrl = ref(localStorage.getItem("avatar"));

let upFile = ref("");
// 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
function onChangePic(file) {
  // console.log("file", file);
  let rawFile = file.raw;
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("Avatar picture must be JPG format!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("Avatar picture size can not exceed 2MB!");
    return false;
  }
  imageUrl = URL.createObjectURL(file.raw);
  upFile.value = file.raw;
  return true;
}

function upload_acatar() {
  let formData = new FormData();
  formData.append("upfile", upFile.value);
  formData.append("token", localStorage.getItem("token"));
  // console.log(localStorage)
  axios
    .post("http://localhost:8080/changeAcatar", formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    })
    .then((res) => {
      if (res.data.code == 0) {
        console.log("success", res);
        ElMessage.success("修改成功");
        localStorage.setItem("token", res.data.data.mytoken);
        localStorage.setItem("avatar", res.data.data.url);
        location.reload();
      } else {
        ElMessage.error("系统错误，修改失败");
      }
    })
    .catch((err) => {
      console.log(err);
    });
}

var resData = reactive({
  info: {},
});
const { info } = toRefs(resData);

let realNameState = ref(false);
const getInfo = () => {
  axios({
    url: "http://localhost:8080/checkLoginer",
    method: "post",
    data: {
      token: localStorage.getItem("token"),
    },
    headers: {
      "Content-type": "application/json", // 默认
      //   "Content-type": "application/x-www-form-urlencoded",
    },
  })
    .then((res) => {
      console.log(res);
      info.value = res.data.data.data;
      if (res.data.data.data.idNum.length > 15) {
        realNameState = true;
      }
      console.log(info);
    })
    .catch((res) => {
      console.log(res);
    });
};
const nameRegist = /^.{3,10}$/;
const updateBase = () => {
  if(nameRegist.test(info.value.name)){
    axios({
    url: "http://localhost:8080/updateBase",
    method: "post",
    data: {
      token: localStorage.getItem("token"),
      name:info.value.name,
      address:info.value.address
    },
    headers: {
      "Content-type": "application/json", // 默认
      //   "Content-type": "application/x-www-form-urlencoded",
    },
  })
    .then((res) => {
      info.value = res.data.data.data;
      location.reload();
      ElMessage.success("修改成功");
    })
    .catch((res) => {
      console.log(res);
    });
  }else{
    ElMessage.error("用户长度应该在3-10之间");
  }

};

//身份证正则判断
const idRegist = /^([1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}([0-9]|X))$/;
const realNameClick = () => {
  if (info.value.realName.length >= 2 && idRegist.test(info.value.idNum)) {
    axios({
      url: "http://localhost:8080/realName",
      method: "post",
      data: {
        realName: info.value.realName,
        idNum: info.value.idNum,
        token: localStorage.getItem("token"),
      },
      headers: {
        "Content-type": "application/json", // 默认
        //   "Content-type": "application/x-www-form-urlencoded",
      },
    })
      .then((res) => {
        if (res.data.code == 0) {
          console.log(res);
          info.value = res.data.data.data;
          realNameState = true;
          console.log(info);
          ElMessage.success("认证成功");
          location.reload();
        } else {
          ElMessage.error("身份信息错误，请修改");
        }
      })
      .catch((err) => {
        open("后台系统错误", "error");
      });
  }else{
    ElMessage.error("身份信息错误，请修改");
  }
};
</script>

<template>
  <div class="main-layout">
    <el-container>
      <el-aside width="200px">
        <div class="side_mian">
          <el-menu default-active="1" class="my_menu">
            <el-menu-item index="1">
              <span>个人资料</span>
            </el-menu-item>
            <el-menu-item index="2">
              <span>账号设置</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-aside>
      <el-main>
        <div class="center_main">
          <h3 class="h3_div">个人资料</h3>
          <el-divider />
          <div class="info_div">
            <el-text class="mx-1">完善个人信息</el-text>
            <el-form label-position="top" label-width="auto" class="info_from">
              <el-form-item label="用户名">
                <el-input
                  v-model="info.name"
                  style="width: 240px"
                  placeholder="请输入用户名"
                  maxlength="10"
                />
              </el-form-item>
              <el-form-item label="住址">
                <el-input placeholder="请输入住址" v-model="info.address" />
              </el-form-item>
              <el-button type="primary" round @click="updateBase">提交用户信息</el-button>
            </el-form>
            <el-form label-position="top" label-width="auto" class="info_from">
              <el-text class="mx-1">完善个人实名认证</el-text>
              <el-form-item label="真实姓名">
                <el-input
                  placeholder="请输入真实姓名"
                  :disabled="realNameState"
                  v-model="info.realName"
                />
              </el-form-item>
              <el-form-item label="身份证号码">
                <el-input
                  placeholder="请输入真实真实身份证号码"
                  :disabled="realNameState"
                  v-model="info.idNum"
                  maxlength="18"
                />
              </el-form-item>
              <el-button
                type="primary"
                round
                @click="realNameClick" 
                :disabled="realNameState"
                >提交实名认证信息</el-button
              >
              <el-form-item label="出生日期">
                <el-input placeholder="出身日期" disabled v-model="info.birthDate" />
              </el-form-item>
              <el-form-item label="性别">
                <el-input placeholder="性别" disabled v-model="info.sex" />
              </el-form-item>
            </el-form>
          </div>
          <div class="photo_dov">
            <el-upload
              class="avatar-uploader"
              action=""
              :show-file-list="false"
              :on-change="onChangePic"
              :auto-upload="false"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
            <el-button type="primary" bg size="small" text @click="upload_acatar"
              >上传头像</el-button
            >
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<style lang="less">
.main-layout {
  .el-aside {
    background: rgb(242, 243, 245);
  }
  .el-main {
    margin-bottom: 10px;
    background: rgb(242, 243, 245);
  }
  .side_mian {
    height: 750px;
    margin: 10px 10px 0 0;
    background-color: rgb(255, 255, 255);
    border-radius: 15px;
  }
  .center_main {
    height: 750px;
    margin: 10px 0 0 10px;
    background-color: rgb(255, 255, 255);
    border-radius: 15px;
    position: relative;
  }
  .my_menu {
    width: 100%;
    border-radius: 15px;
  }
  .h3_div {
    padding: 10px;
  }
  .el-divider {
    margin: 0px;
  }
  .photo_dov {
    text-align: center;
    height: 150px;
    width: 150px;
    position: absolute;
    right: 30px;
    top: 50px;
  }
  .avatar-uploader .el-upload {
    height: 100px;
    width: 100px;
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }
  .avatar {
    height: 100px;
    width: 100px;
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    text-align: center;
  }
  .info_div {
    margin: 20px;
    width: 800px;
  }
  .info_from {
    margin-top: 10px;
  }
}
</style>
